<!--
- Author:  lalala.
- Date:    2018/11/2 003.
- File:    search.
-->
<template>
  <div style="background-color: #fff;margin-bottom: 0;" class="Web_Box">
    <div @click="$utils.back" class="Topmenu"><i class="iconfont icon-youjiantou"><a href=""></a></i>
      <h1>搜索</h1>
      <span></span>
    </div>
    <div class="qjdy">
      <div style="padding: 10px;height: auto;" class="esb-top">
        <!--<i class="iconfont icon-youjiantou" style=""></i>-->
        <span style="width: 11rem;height: 30px;">
           <i class="iconfont icon-sousuo"></i>
           <input type="text" v-model="keyword" style="width: 90%;height: 28px;" placeholder="搜索你想要的表">
        </span>
        <button @click="searchGoods" class="search-btn">搜索</button>
        <!--<i class="iconfont icon-gouwuche on" style=" "></i>-->
        <!--<i class="iconfont icon-kefu"></i>-->
      </div>
      <div style="padding-left: 0.68rem;overflow: hidden;">
        <div class="sousuobiaoti1">历史搜索
          <i @click="delSearchHistory" style="float: right;color: #ccc;padding: 0 0.25rem;margin-right: 0.25rem" class="iconfont icon-lajitong"></i>
        </div>
        <div class="sousuobiaoge">
          <ul>
            <li @click="goSearchGood(item)" v-for="item in historyKeywords">{{item}}</li>
          </ul>
        </div>
        <div class="sousuobiaoti2">热门搜索词</div>
        <div class="sousuobiaoge">
          <ul>
            <li @click="goSearchGood(item.key_word)" v-for="item in hotKeys">{{item.key_word}}</li>
          </ul>
        </div>
        <div class="sousuobiaoti2">热门品牌</div>
        <div class="sousuobiaoge">
          <ul>
            <li @click="showBrandInfo(item.brand_id)" v-for="item in hotBrands">{{item.brand_name}} / {{item.brand_enname}}</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    data() {
      return {
        keyword: '',
        hotKeysParam: {page: 1, pageSize: 12},
        hotKeys: [],
        hotBrands: [],
        historyKeywords: []
      }
    },
    components: {},
    created() {
      this.getKeys(this.hotKeysParam.page, this.hotKeysParam.pageSize)
      this.getHotBrands(1, 12)
      this.historyKeywords = this.$storage.getSearchKey()
    },
    methods: {
      searchGoods() {
        var keyword = this.keyword
        if (!keyword) {
          this.$toast('请输入搜索关键字！')
          return
        }
        if (keyword.length > 20) {
          this.$toast('关键字不能超过20个字符！')
          return
        }
        this.$storage.setSearchKey(keyword)
        this.goSearchGood(keyword)
      },
      goSearchGood(keyword) {
        this.$router.push({name: 'goods-list', params: {keyword: keyword}})
      },
      showBrandInfo(id) {
        this.$router.push({name: 'goods-list', params: {brand_id: id}})
      },
      delSearchHistory() {
        this.$storage.setSearchKey('', 1)
        this.historyKeywords = []
      },
      getKeys(page, pageSize) {
        this.$request.getHotSearchKey(page, pageSize).then(data => {
          this.hotKeys = data
        })
      },
      getHotBrands(page, pageSize) {
        this.$request.getHotBrands(page, pageSize).then(data => {
          this.hotBrands = [...data]
        }).finally(() => {
        })
      }
    }
  }
</script>

<style>
  .sousuobiaoge ul li{margin-right: 0.68rem !important;min-width: 3.88rem;width: auto;padding: 0 0.25rem;}
  .esb-top .search-btn{width: 2.5rem;background-color: #fff;height: 1.2rem;
    border: 1px solid #ececec;border-radius: 3px;}
</style>
